<template>
    <el-form :model="formData"  label-position="left" label-width="90px"
      size="default" @submit.prevent>
      <el-row class="box">
        <el-row class="box-top">
          <div class="box-left">
            <el-col :span="24" class="grid-cell">  
              <el-form-item :label="$t('teacher.userName')" prop="userName">
                <el-input v-model="formData.userName" type="text"  clearable :placeholder="$t('teacher.userName1')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="grid-cell">
              <el-form-item :label="$t('teacher.nickname')" prop="nickname">
                <el-input v-model="formData.nickname" type="text"  clearable :placeholder="$t('teacher.nickname1')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="grid-cell">
              <el-form-item :label="$t('teacher.password')" prop="password">
                <el-input v-model="formData.password" type="text"  clearable :placeholder="$t('teacher.password1')"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!-- <div class="box-right" >
            <nav >
              <img :src="formData.photo" v-if="formData.photo" style=" height: 220px; width: 200px; padding-left: 60px;" />
            </nav>
            <nav style="padding-left: 100px;padding-top: 5px;">
              <el-button type="primary" round @click="toGetImg" style="width: 80px; text-align: center;">{{$t('teacher.uploadphoto')}}</el-button>
            </nav>
          </div> -->
        </el-row>
        <el-col :span="10" class="grid-cell">
          <el-form-item :label="$t('teacher.sex')" prop="sex">
            <el-radio-group v-model="formData.sex" class="full-width-input" clearable >
              <el-radio :label="1">{{$t('teacher.male')}}</el-radio>
              <el-radio :label="2">{{$t('teacher.female')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item :label="$t('teacher.level')" prop="level">
            <el-radio-group v-model="formData.level" class="full-width-input" clearable >
              <el-radio :label="1">{{ $t('teacher.JuniorTeacher') }}</el-radio>
              <el-radio :label="2">{{ $t('teacher.IntermediateTeacher') }}</el-radio>
              <el-radio :label="3">{{ $t('teacher.SeniorTeacher') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="grid-cell">
          <el-form-item :label="$t('teacher.phone')" prop="phone">
            <el-input v-model="formData.phone" type="text" clearable :placeholder="$t('teacher.phone1')"></el-input>
          </el-form-item>
        </el-col>  
        <el-col :span="24" class="grid-cell">
          <el-form-item :label="$t('teacher.email')" prop="email">
            <el-input v-model="formData.email" type="text" clearable :placeholder="$t('teacher.email1')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="grid-cell">
          <el-form-item :label="$t('teacher.introduction')" prop="introduction">
            <el-input v-model="formData.introduction" :rows="8" type="textarea"  clearable :placeholder="$t('teacher.introduction1')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <div class="static-content-item">
            <el-button @click="submit">{{$t('teacher.confirm')}}</el-button>
          </div>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <div class="static-content-item">
            <el-button @click="getmain">{{$t('teacher.cancel')}}</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    
  </template>
  <script>
    import {
      defineComponent,
      ref
    }
    from 'vue'
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
    import en from 'element-plus/dist/locale/en.mjs'
    const radio = ref(2)
    let inputElement = null
    export default defineComponent({
      name: 'ADD_USERTEA_TABLE',
      props:[],
      components: {  },
      data: function(){
       return {
           formData: {
            userName:"",
            nickname:"",
            password:"",
            sex:"",
            level:"",
            role:"2",
            phone:"",
            email: "",
            introduction: "",
            photo:"",
          },
       }
       },
      
      methods: {
          submit(){
              var that = this;
              window.http.post('/api/user/AddUserTea',this.formData).then(res => {
              console.info(JSON.stringify(res));
                var data = res.data;
                if(data.success){
                  that.$message.success(that.$t('teacher.addsuccess'));
                  this.$router.push({
                    name:"teacher",
                    }); 
                }else{
                  that.$message.error(that.$t('teacher.addfail'));
                } 
            })
            .catch(function(error){
              that.$message.error(that.$t('teacher.ServerException'));
            })
            },
          getmain(){
            this.$router.push({
                    name:"teacher",
                    }); 
          },toGetImg() {
            if (inputElement === null) {
            // 生成文件上传的控件
              inputElement = document.createElement('input')
              inputElement.setAttribute('type', 'file')
              inputElement.style.display = 'none'

              if (window.addEventListener) {
                inputElement.addEventListener('change', this.uploadFile, false)
              } else {
                inputElement.attachEvent('onchange', this.uploadFile)
              }

              document.body.appendChild(inputElement)
            }
            inputElement.click()
          },
          uploadFile(el) {
            if (el && el.target && el.target.files && el.target.files.length > 0) {
              console.log(el)
              const files = el.target.files[0]
              const isLt2M = files.size / 1024 / 1024 < 2
              const size = files.size / 1024 / 1024
              console.log(size)
              // 判断上传文件的大小
              if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
              } else if (files.type.indexOf('image') === -1) { //如果不是图片格式
                // this.$dialog.toast({ mes: '请选择图片文件' });
                this.$message.error('请选择图片文件');
              } else {
                const that = this;
                const reader = new FileReader(); // 创建读取文件对象
                reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
                reader.onload = function() { // 文件读取完成后
                  // 读取完成后，将结果赋值给img的src
                  that.formData.photo = this.result;
                  console.log(this.result);
                  // 数据传到后台
                //const formData = new FormData()
                //formData.append('file', files); // 可以传到后台的数据
                };
              }
            }
          },
          beforeDestroy() {
              if (inputElement) {
                if (window.addEventListener) {
                  inputElement.removeEventListener('change', this.onGetLocalFile, false)
                } else {
                  inputElement.detachEvent('onchange', this.onGetLocalFile)
                }
                document.body.removeChild(inputElement)
                inputElement = null
                console.log('========inputelement destroy')
              }
            },
      },
    })
    
  </script>
  
  <style lang="scss">
    .el-input-number.full-width-input,
    .el-cascader.full-width-input {
      width: 100% !important;
    }
    
    .el-form-item--medium {
      .el-radio {
        line-height: 36px !important;
      }
      
      .el-rate {
        margin-top: 8px;
      }
    }
    
    .el-form-item--small {
      .el-radio {
        line-height: 32px !important;
      }
      
      .el-rate {
        margin-top: 6px;
      }
    }
    
    .el-form-item--mini {
      .el-radio {
        line-height: 28px !important;
      }
      
      .el-rate {
        margin-top: 4px;
      }
    }
    
    .clear-fix:before,
    .clear-fix:after {
      display: table;
      content: "";
    }
    
    .clear-fix:after {
      clear: both;
    }
    
    .float-right {
      float: right;
    }
    
  </style>
  
  <style lang="scss" scoped>
    div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
  
        td.table-cell {
          display: table-cell;
          height: 36px;
          border: 1px solid #e1e2e3;
        }
      }
    }
    
    div.tab-container {}
    
    .label-left-align :deep(.el-form-item__label) {
      text-align: left;
    }
    
    .label-center-align :deep(.el-form-item__label) {
      text-align: center;
    }
    
    .label-right-align :deep(.el-form-item__label) {
      text-align: right;
    }
    
    .custom-label {}
    
    .static-content-item {
      min-height: 20px;
      display: flex;
      align-items: center;
      margin-left: 169px;
      :deep(.el-divider--horizontal) {
        margin: 0;
      }
    }
    .box{
      width: 1000px ;
      margin:auto;
      margin-top: 2% ;
      flex: auto;
    }
    .el-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 800px;
      border: 0px solid #fdfbfb;
      background-color: 0px #fdfbfb;
    }
    .box-top{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 280px;
      width: 1000px;
      

    }
    .box-left{
      display: flex;
      flex-direction:column;
      justify-content: space-between;
      height: 100px;
      width: 70% ;
    }
    .box-right{
      display: flex;
      flex-direction:column;
      height: 280px;
      width: 30%;
    }
   
  </style>